<template>
  <div class="card-container">
    <div
      v-if="!outSea"
      class="raise-dingding-button"
    >
      <co-button
        class="raise-dingding-action"
        color="primary"
        @click="gotoDingtalk"
      >
        打开钉钉
      </co-button>
      <div class="raise-dingding-desc">
        已安装钉钉？请点此打开钉钉UCAN票务系统
      </div>
      <a
        class="download-dingding-action"
        href="https://www.dingtalk.com/download?lwfrom=2017120202092064209309201&t=1530078705019"
      >
        下载钉钉
      </a>
      <div class="raise-dingding-desc">
        未安装钉钉? 请点此下载并安装钉钉
      </div>
      <div class="qr">
        <img src="https://gw.alicdn.com/tfs/TB10uRkICzqK1RjSZPxXXc4tVXa-373-372.png" alt="">
      </div>
      <div class="qr-desc">
        PC购票可扫码进入钉钉UCAN票务系统
      </div>
    </div>
    <div
      v-else
      class="out-sea-email"
    >
      <div class="out-sea-email-inner">
        尊敬的海外用户<br>入场凭证稍后将发送到您预留的邮箱<br>请注意查收
      </div>
    </div>
    <ul class="description">
      <li>请务必使用购票时预留的⼿手机号登录钉钉, 查看自己的入场凭证</li>
      <li>同一账户购票多张时, 其他⽤票⼈将收到短信提示获取⼊场权</li>
      <li>已安装钉钉的⽤户: 点击后将在钉钉UCAN票务系统中看到自己的入场凭证</li>
      <li>未安装钉钉的⽤用户: 需要先安装钉钉, 再用购票时预留的手机登录查看自己的入场凭证</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'AcquireTicket',
  props: ['outSea'],
  data() {
    return {};
  },
  computed: {},
  created: function () {
    // this.id = this.$route.params.id;
  },
  methods: {
    gotoDingtalk() {
      location.href = "dingtalk://dingtalkclient/action/switchtab?index=2&name=work&scene=1&corpid=ding3693d292f695a58d35c2f4657eb6378f";
    }
  }
};
</script>

<style scoped lang="scss">
  .card-container {
    width: 100%;
    padding: 0;
    overflow: hidden;
    margin-bottom: 24px;
    text-align: left;

    .raise-dingding-button {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      padding: 10px 0;

      .raise-dingding-action {
        width: 384px;
      }

      .download-dingding-action {
        margin-top: 18px;
        display: block;
        font-size: 36px;
        padding: 23px 120px;
        border: 1px solid #fff;
        color: #fff;
        text-decoration: none;
        border-radius: 4px; /*no*/
      }

      .raise-dingding-desc, .qr-desc {
        margin-top: 18px;
        font-size: 24px;
        color: #a3a3a3;
      }

      .qr {
        margin-top: 37px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        img {
          width: 200px;
          height: 200px;
        }
      }
    }

    .out-sea-email {
      width: 100%;
      padding: 2px;
      box-sizing: border-box;
      background: linear-gradient(to left, #DA514F, #A802BD, #5803E4);
      border-radius: 8px;

      .out-sea-email-inner {
        background: #000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        padding: 24px;
        text-align: center;
        font-size: 24px;
        color: #fff;
        line-height: 1.8;
        border-radius: 8px;
      }
    }

    .description {
      width: 100%;
      box-sizing: border-box;
      padding: 30px 0 30px 30px;
      border-top: 1px dashed #fff;
      margin-top: 30px;
      position: relative;
      font-size: 22px;

      &:before {
        content: '说明';
        position: absolute;
        top: -15px;
        left: 50%;
        margin-left: -35px;
        width: 70px;
        background: #000;
        text-align: center;
      }

      li {
        list-style: url("https://gw.alicdn.com/tfs/TB1PgL.HZbpK1RjSZFyXXX_qFXa-10-10.svg");
        line-height: 1.8;
        color: #d1d1d1;
      }
    }
  }
</style>
